<template>
	<view class="content">
		<view class="g-header"></view>
		<view class="innerPre">
			<view class="header">
				<view class="header1"></view>
				<view class="header2">我的</view>
				<view class="header3" @click="util.linkTo(`/pages/index/waterIntakeNotice`)"></view>
				<view class="header4" @click="util.linkTo(`/pages/user/setting`)"></view>
			</view>
			<view class="mine">
				<view class="mine1"></view>
				<view class="mine2">
					<view class="mine21">深圳比亚迪科技有限公司</view>
					<view class="mine22">账号：SZ098430</view>
				</view>
				<view class="mine3">
					<view class="mine31" @click="util.linkTo(`/pages/login/login`)">
						<view class="mine311"></view>
						<view class="mine312"></view>
					</view>
					<view class="mine32" @click="util.linkTo(`/pages/user/myIntegral`)">
						<view class="mine321"></view>
						<view class="mine322">签到领鲜泉币</view>
					</view>
				</view>
			</view>
		</view>
		<view class="inner">
			<view class="mineBlock">
				<view class="mineBlockH">
					<view class="mineBlockHTitle">我的订单</view>
					<view class="mineBlockHRight" @click="util.linkTo(`/pages/user/orderList`)">
						<view class="mineBlockHRight1">全部</view>
						<view class="mineBlockHRight2"></view>
					</view>
				</view>
				<view class="mineBlockB mineBlockB1">
					<view class="mineMenuLi" @click="util.linkTo(`/pages/user/orderList?type=1`)">
						<view class="mineMenuLiIcon mineMenuLiIcon0"></view>
						<view class="mineMenuLiText">待签约</view>
					</view>
					<view class="mineMenuLi" @click="util.linkTo(`/pages/user/orderList?type=1`)">
						<view class="mineMenuLiIcon  mineMenuLiIcon1"></view>
						<view class="mineMenuLiText">待付款</view>
					</view>
					<view class="mineMenuLi" @click="util.linkTo(`/pages/user/orderList?type=1`)">
						<view class="mineMenuLiIcon  mineMenuLiIcon2"></view>
						<view class="mineMenuLiText">待收货</view>
					</view>
					<view class="mineMenuLi" @click="util.linkTo(`/pages/user/orderList?type=1`)">
						<view class="mineMenuLiIcon  mineMenuLiIcon3"></view>
						<view class="mineMenuLiText">待安装</view>
					</view>
					<view class="mineMenuLi mineMenuLiLast" @click="util.linkTo(`/pages/user/orderList?type=1`)">
						<view class="mineMenuLiIcon  mineMenuLiIcon4"></view>
						<view class="mineMenuLiText">待评价</view>
					</view>
				</view>
			</view>

			<view v-for="(n, i) in menuList" :key="i" class="mineBlock">
				<view class="mineBlockH">
					<view class="mineBlockHTitle">{{ n.title }}</view>
				</view>
				<view class="mineBlockB">
					<view class="mineMenuLi" v-for="(nn, ii) in n.child" :key="ii" @click="menuClick(nn)">
						<view class="mineMenuLiIcon" :class="nn.icon"></view>
						<view class="mineMenuLiText">{{ nn.label }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="innerNext"></view>
		<menu-bottom></menu-bottom>
	</view>
</template>

<script>
import * as util from '@/common/util'
import _ from 'lodash'

export default {
	components: {},
	data() {
		return {
			title: 'Hello',
			list: [],
			// :style="{backgroundImage:`url(${n.head_url})`}"
			menuList: [
				{
					title: '我的账户',
					child: [
						{ label: '钱包', url: '', icon: 'icon_mine_m10' },
						{ label: '设备押金', url: '/pages/user/eqDeposit', icon: 'icon_mine_m11' },
						{ label: '红包卡券', url: '', icon: 'icon_mine_m12' },
						{ label: '鲜泉币', url: '/pages/user/myIntegral', icon: 'icon_mine_m13' }
					]
				},
				{
					title: '充值与缴费',
					child: [
						{ label: '充值', url: '/pages/index/recharge', icon: 'icon_mine_m20' },
						{ label: '缴费', url: '', icon: 'icon_mine_m21' },
						{ label: '自动缴费签约', url: '', icon: 'icon_mine_m22' },
						{ label: '解除自动缴费', url: '', icon: 'icon_mine_m23' }
					]
				},
				{
					title: '合同管理',
					child: [{ label: '申请装机', url: '/pages/user/contractAdd', icon: 'icon_mine_m30' }, { label: '合同签约', url: '', icon: 'icon_mine_m31' }]
				},
				{
					title: '发票管理',
					child: [
						{ label: '申请开票', url: '/pages/user/receiptAdd', icon: 'icon_mine_m40' },
						{ label: '已开发票', url: '/pages/user/receiptMine', icon: 'icon_mine_m41' },
						{ label: '开票资料', url: '/pages/user/receiptSetting', icon: 'icon_mine_m42' }
					]
				},
				{
					title: '服务中心',
					child: [
						{ label: '预约服务', url: '/pages/user/reservationService', icon: 'icon_mine_m50' },
						{ label: '待派工', url: '/pages/user/orderList?type=1', icon: 'icon_mine_m51' },
						{ label: '待服务', url: '/pages/user/orderList?type=2', icon: 'icon_mine_m52' },
						{ label: '待评价', url: '/pages/user/orderList?type=3', icon: 'icon_mine_m53' }
					]
				},
				{
					title: '其他',
					child: [
						{ label: '关于我们', url: '/pages/user/about', icon: 'icon_mine_m60' },
						{ label: '我的公益', url: '/pages/user/welfare', icon: 'icon_mine_m61' },
						{ label: '联系客服', url: '', icon: 'icon_mine_m62' },
						{ label: '联系电话', url: '', icon: 'icon_mine_m63' }
					]
				}
			]
		}
	},
	onLoad() {
		console.log('utils', util.modelGet('userInfo'))

		this.id = this.$Route.query.id
		console.log('this.id', this.id)
	},
	onShow() {},
	mounted() {},
	onReady() {},
	methods: {
		menuClick(nn) {
			if (nn.url) {
				util.linkTo(nn.url)
			} else {
				util.message('正在开发中~')
			}
		}
	}
}
</script>
<style lang="scss">
page {
	background-color: #f7f9fb;
}

.innerPre {
	padding: 24px;
	padding-top: 100px;
	width: 750px;
	background: linear-gradient(180deg, rgba(74, 131, 255, 0.8500000238418579) 0%, #3974f6 100%);
	border-radius: 0px 0px 0px 0px;
	opacity: 1;
}

.inner {
	padding: 24px;
}

.innerNext {
}

.header {
	display: flex;
	align-items: center;
	.header1 {
		width: 48px;
		height: 48px;

		background-image: url(#{$bgPath}/icon_menu_list.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100% 100%;
	}
	.header2 {
		margin-left: auto;
		font-size: 34px;
		font-weight: normal;
		color: #ffffff;
		line-height: 48px;
	}
	.header3 {
		margin-left: auto;
		width: 48px;
		height: 48px;

		background-image: url(#{$bgPath}/icon_message_white.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100% 100%;
	}
	.header4 {
		margin-left: 24px;
		width: 48px;
		height: 48px;

		background-image: url(#{$bgPath}/icon_user_setting.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100% 100%;
	}
}

.mine {
	margin-top: 50px;
	display: flex;
	align-items: center;
	.mine1 {
		width: 112px;
		height: 112px;
		border-radius: 16px 16px 16px 16px;
		opacity: 1;
		background-color: lightgrey;
	}
	.mine2 {
		margin-top: -24px;
		margin-left: 24px;
		.mine21 {
			font-size: 28px;
			font-weight: normal;
			color: #ffffff;
			line-height: 44px;
		}
		.mine22 {
			font-size: 24px;
			font-weight: normal;
			color: rgba(255, 255, 255, 0.6499999761581421);
			line-height: 36px;
		}
	}
	.mine3 {
		margin-left: auto;
		display: flex;
		flex-flow: column;
		align-items: flex-end;
		.mine31 {
			display: flex;
			align-items: center;
			.mine311 {
				width: 32px;
				height: 32px;

				background-image: url(#{$bgPath}/icon_mine_code.png);
				background-repeat: no-repeat;
				background-position: center center;
				background-size: 100% 100%;
			}
			.mine312 {
				width: 32px;
				height: 32px;

				background-image: url(#{$bgPath}/icon_direct_right_grey.png);
				background-repeat: no-repeat;
				background-position: center center;
				background-size: 100% 100%;
			}
		}

		.mine32 {
			margin-right: -24px;
			margin-top: 10px;
			display: flex;
			align-items: center;
			background: rgba(0, 0, 0, 0.15000000596046448);
			border-radius: 24px 0px 0px 24px;
			opacity: 1;
			padding: 10px;
			.mine321 {
				width: 26px;
				height: 26px;

        margin-right: 10px;

				background-image: url(#{$bgPath}/icon_xqb_3.png);
				background-repeat: no-repeat;
				background-position: center center;
				background-size: 100% 100%;
			}
			.mine322 {
        font-size: 24px;
				font-weight: normal;
				color: #ffffff;
        height: 26px;
        line-height: 26px;
			}
		}
	}
}

.mineBlock {
	background: #ffffff;
	border-radius: 8px 8px 8px 8px;
	opacity: 1;
	padding: 24px;
	margin-bottom: 24px;
	.mineBlockH {
		display: flex;
		align-items: center;
		.mineBlockHTitle {
			font-size: 28px;
			font-weight: bolder;
			color: rgba(0, 0, 0, 0.8500000238418579);
			line-height: 44px;
		}

		.mineBlockHRight {
			margin-left: auto;
			display: flex;
			justify-content: center;
			align-items: center;
			.mineBlockHRight1 {
				font-size: 24px;
				font-weight: normal;
				line-height: 36px;
			}
			.mineBlockHRight2 {
				width: 24px;
				height: 24px;

				background-image: url(#{$bgPath}/icon_left_grey.png);
				background-repeat: no-repeat;
				background-position: center center;
				background-size: 100% 100%;
			}
		}
	}

	.mineBlockB {
		display: flex;
		align-items: center;
		margin-top: 20px;
		&.mineBlockB1 {
			.mineMenuLi {
				width: 20%;
			}
		}

		.mineMenuLi {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-flow: column;
			width: 25%;
			.mineMenuLiText {
				font-size: 24px;
				font-weight: normal;
				color: rgba(0, 0, 0, 0.6499999761581421);
				line-height: 36px;
			}

			.mineMenuLiIcon {
				width: 64px;
				height: 64px;
				background-repeat: no-repeat;
				background-position: center center;
				background-size: 100% 100%;

				opacity: 1;
			}
			.mineMenuLiIcon0 {
				background-image: url(#{$bgPath}/icon_mine_m00.png);
			}
			.mineMenuLiIcon1 {
				background-image: url(#{$bgPath}/icon_mine_m01.png);
			}
			.mineMenuLiIcon2 {
				background-image: url(#{$bgPath}/icon_mine_m02.png);
			}
			.mineMenuLiIcon3 {
				background-image: url(#{$bgPath}/icon_mine_m03.png);
			}
			.mineMenuLiIcon4 {
				background-image: url(#{$bgPath}/icon_mine_m04.png);
			}

			//   1
			.icon_mine_m10 {
				background-image: url(#{$bgPath}/icon_mine_m10.png);
			}
			.icon_mine_m11 {
				background-image: url(#{$bgPath}/icon_mine_m11.png);
			}
			.icon_mine_m12 {
				background-image: url(#{$bgPath}/icon_mine_m12.png);
			}
			.icon_mine_m13 {
				background-image: url(#{$bgPath}/icon_mine_m13.png);
			}
			//  2
			.icon_mine_m20 {
				background-image: url(#{$bgPath}/icon_mine_m20.png);
			}
			.icon_mine_m21 {
				background-image: url(#{$bgPath}/icon_mine_m21.png);
			}
			.icon_mine_m22 {
				background-image: url(#{$bgPath}/icon_mine_m22.png);
			}
			.icon_mine_m23 {
				background-image: url(#{$bgPath}/icon_mine_m23.png);
			}
			//  3
			.icon_mine_m30 {
				background-image: url(#{$bgPath}/icon_mine_m30.png);
			}
			.icon_mine_m31 {
				background-image: url(#{$bgPath}/icon_mine_m31.png);
			}
			.icon_mine_m32 {
				background-image: url(#{$bgPath}/icon_mine_m32.png);
			}
			.icon_mine_m33 {
				background-image: url(#{$bgPath}/icon_mine_m33.png);
			}
			//  4
			.icon_mine_m40 {
				background-image: url(#{$bgPath}/icon_mine_m40.png);
			}
			.icon_mine_m41 {
				background-image: url(#{$bgPath}/icon_mine_m41.png);
			}
			.icon_mine_m42 {
				background-image: url(#{$bgPath}/icon_mine_m42.png);
			}
			.icon_mine_m43 {
				background-image: url(#{$bgPath}/icon_mine_m43.png);
			}
			//  5
			.icon_mine_m50 {
				background-image: url(#{$bgPath}/icon_mine_m50.png);
			}
			.icon_mine_m51 {
				background-image: url(#{$bgPath}/icon_mine_m51.png);
			}
			.icon_mine_m52 {
				background-image: url(#{$bgPath}/icon_mine_m52.png);
			}
			.icon_mine_m53 {
				background-image: url(#{$bgPath}/icon_mine_m53.png);
			}
			//  5
			.icon_mine_m60 {
				background-image: url(#{$bgPath}/icon_mine_m60.png);
			}
			.icon_mine_m61 {
				background-image: url(#{$bgPath}/icon_mine_m61.png);
			}
			.icon_mine_m62 {
				background-image: url(#{$bgPath}/icon_mine_m62.png);
			}
			.icon_mine_m63 {
				background-image: url(#{$bgPath}/icon_mine_m63.png);
			}
		}
	}
}
</style>
